<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <div>
      <Row type="flex">
        <Col :xs="{span: 24}" :sm="{ span: 20, offset: 2 }" :md="{ span: 18, offset: 3 }" :lg="{ span: 16, offset: 4 }">
        <div class="resume-opera">
          <p>
            <span>
              分享
            </span>
            ·
            <span>
              保存为PDF
            </span>
          </p>
          <p>
            <span>最后更新于2018年7月</span>
          </p>
        </div>
        <div class="resume">

          <div class="resume-header">
            <div class="resume-info">
              <div class="resume-info-part-1">
                <Row type="flex">
                  <Col :xs="{span: 24}" :md="{ span: 8}">
                  <div class="resume-name">冯培成</div>
                  </Col>
                  <Col :xs="{span: 24}" :md="{ span: 16}">
                  <div class="resume-job">Web前端工程师 | PHP工程师</div>
                  </Col>
                </Row>
              </div>
              <div class="resume-info-part-2">
                <div>
                  <div>男 · 1996.02</div>
                  <div>四年制本科 · 仲恺农业工程学院</div>
                  <div>环境科学 · 2018年毕业</div>
                  <!-- <div>联系方式 · 561922304@qq.com</div> -->
                </div>
                <div>
                  <div>像素小站 · 项目集</div>
                  <div>
                    FxPixels · GitHub
                    <Icon type="social-github"></Icon>
                  </div>
                  <div>
                    FxPixels · 码云
                    <i class="iconfont icon-mayun"></i>
                  </div>
                  <!-- <div>
                      FxPixels · 网易云音乐人
                      <i class="iconfont icon-wangyiyunyinle"></i>
                    </div> -->
                </div>
              </div>
            </div>
          </div>

          <hr>

          <div class="resume-experience">
            <div class="resume-experience-header">
              <div class="resume-section-header">
                <Icon type="code-working"></Icon>
                <span>经历</span>
              </div>

              <div class="resume-content">

                <div class="resume-experience">
                  <span class="sign">工作</span>
                  <div>
                    <p>
                      <strong>佛山文道科技有限公司 (佛山)</strong>
                    </p>
                    <p>
                      <span>
                        2018年1月 至 2018年8月
                      </span>
                      <span>
                        - Web前端 & PHP工程师
                      </span>
                    </p>
                  </div>
                  <div>
                    <p>
                      包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>dddddd</li>
                    </ul>
                  </div>
                </div>
                <div class="resume-experience">
                  <span class="sign">在校</span>
                  <div>
                    <p>
                      <strong>校青年志愿者协会</strong>
                    </p>
                    <p>
                      <span>
                        2014年9月 至 2016年6月
                      </span>
                      <span>
                        - 干事、正部长
                      </span>
                    </p>
                  </div>
                  <div>
                    <p>
                      在校期间加入校青协信息部，担任正部长，进行多媒体和Web技术工作，包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>ddddddd</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <hr>

          <div class="resume-experience">
            <div class="resume-experience-header">
              <div class="resume-section-header">
                <Icon type="clipboard"></Icon>
                <span>项目</span>
              </div>
              <div class="resume-server">
                <p>服务器 - 阿里云(华南) 突发性能ECS</p>
                <p>配置： 1核 / 1G内存 / 1M宽带</p>
                <p>HTTP服务器： Nginx1.14 · Apache2.4 · uWSGI 2.0</p>
                <p>数据库： Mysql5.7</p>
                <p>缓存： Redis3.0 · Memcached1.4</p>
                <p>语言环境： PHP7.2 · Node8.11 · Python2.7+3.6 </p>
              </div>
              <div class="resume-content">

                <div class="resume-experience">
                  <span class="sign">进行中</span>
                  <div>
                    <p>
                      <strong>区块链PC端软件</strong>
                    </p>
                    <p>2018年5月 至 2018年7月</p>
                    <p>技术栈：Electron + React + Ant Design</p>
                  </div>
                  <div>
                    <p>
                      包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>ddddddd</li>
                    </ul>
                  </div>
                </div>

                <div class="resume-experience">
                  <span class="sign">进行中</span>
                  <div>
                    <p>财经数据接口（https）</p>
                    <p>2018年3月 至 2018年7月</p>
                    <p>技术栈：Django + Vue + iview</p>
                  </div>
                  <div>
                    <p>
                      包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>ddddddd</li>
                    </ul>
                  </div>
                </div>

                <div class="resume-experience">
                  <span class="sign">部分完成</span>
                  <div>
                    <p>一个导航页</p>
                    <p>2018年1月 至 2018年2月</p>
                    <p>技术栈：JQuery + Vue + iview</p>
                  </div>
                  <div>
                    <p>
                      在校期间加入校青协信息部，担任正部长，进行多媒体和Web技术工作，包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>ddddddd</li>
                    </ul>
                  </div>
                </div>

                <div class="resume-experience">
                  <span class="sign">已完成</span>
                  <div>
                    <p>一个简单的后台</p>
                    <p>2017年12月 至 2018年1月</p>
                    <p>技术栈：ThinkPHP + Vue + iview + Mysql</p>
                  </div>
                  <div>
                    <p>
                      在校期间加入校青协信息部，担任正部长，进行多媒体和Web技术工作，包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>ddddddd</li>
                    </ul>
                  </div>
                </div>

                <div class="resume-experience">
                  <span class="sign">部分完成</span>
                  <div>
                    <p>
                      天气数据接口（https）</p>
                    <p>2017年11月 至 2017年12月</p>
                    <p>技术栈：ThinkPHP + Vue + iview</p>
                  </div>
                  <div>
                    <p>
                      包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>ddddddd</li>
                    </ul>
                  </div>
                </div>

                <div class="resume-experience">
                  <span class="sign">已完成</span>
                  <div>
                    <p>仿简书网</p>
                    <p>2017年10月 至 2017年11月</p>
                    <p>技术栈：Laravel + Bootstrap + Mysql</p>
                  </div>
                  <div>
                    <p>
                      在校期间加入校青协信息部，担任正部长，进行多媒体和Web技术工作，包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>ddddddd</li>
                    </ul>
                  </div>
                </div>

                <div class="resume-experience">
                  <span class="sign">已完成</span>
                  <div>
                    <p>一个多人博客</p>
                    <p>2017年9月 至 2017年10月</p>
                    <p>技术栈：Express + Semantic + MongoDB</p>
                  </div>
                  <div>
                    <p>
                      包括：
                    </p>
                    <ul>
                      <li>xxxx</li>
                      <li>xxxx</li>
                      <li>ddddddd</li>
                    </ul>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <hr>

          <div class="resume-skills">
            <div class="resume-section-header">
              <Icon type="wand"></Icon>
              <span>技能</span>
            </div>

            <div class="resume-content">
              <div class="skill-content">
                <div>
                  <p>Photoshop</p>
                  <p>xxxxxxxxxxxxxxxx弹框</p>
                  <Progress :percent="45" status="active" stroke-width='8'>
                    <Icon type="checkmark-circled"></Icon>
                    <span>成功</span>
                  </Progress>
                </div>
              </div>
            </div>
          </div>

          <hr>

          <div class="resume-other">
            <div class="resume-section-header">
              <Icon type="ipad"></Icon>
              <span>其他</span>
            </div>

            <div class="resume-content">
              <div class="skill-content">
                <div>
                  <p>Photoshop</p>
                  <p>xxxxxxxxxxxxxxxx弹框</p>
                </div>
              </div>
            </div>
          </div>

          <hr>

          <div class="resume-intro">
            <div class="resume-section-header">
              <Icon type="paper-airplane"></Icon>
              <span>关于我</span>
            </div>

            <div class="resume-content">
              <div class="aboutme-content">
                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxvwerwerwew werw erwerwerwerwerw
              </div>
            </div>
          </div>

        </div>

        <div class="resume-footer">
          Copyright © 2017-2018 像素小站
          <br>
          All rights reserved By FxPixles. 
        </div>

        </Col>
      </Row>
    </div>
    <BackTop>
      <span class="glow-top">
        <Icon type="arrow-up-c"></Icon>
      </span>
    </BackTop>
    <!-- <router-view/> -->
  </div>
</template>

<script>
import Header from "./components/Header";

export default {
  name: "App",
  data() {
    return {
      test: "标题 - "
    };
  },
  components: {
    // Header
  },
  method: {
    handleScroll () {
      var scrollTop = this.$parent.$el.scrollTop
      console.log(scrollTop)
      if (scrollTop > 135) {
        this.positionFlag = true
      } else {
        this.positionFlag = false
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  }
};
</script>

<style>
.ivu-progress-bg{
  background-color: #00B38A;
  opacity: .7;
}

.glow-top:hover{
  opacity: .9;
}

.glow-top{
  display: inline-block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #00B38A;
  opacity: .6;
  transition: .5s;
}

.glow-top i{
  color: #fff;
  font-size: 23px;
}


:root {
  --bg-color: #eeeeee;
  --font-color: #333333;
  --resume-header: #00b38a;
}

html {
  background-color: var(--bg-color);
}

hr {
  background-color: #eeeeee;
  height: 1px;
  border: none;
}

#app {
  font-family: "Microsoft yahei", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 40px;
  background-color: var(--bg-color);
}

.resume-opera {
  display: flex;
  justify-content: space-between;
  padding: 9px 8px;
  color: #bbbbbb;
}

.resume-info-part-2 div {
  line-height: 28px;
}

@media screen and (max-width: 992px) {
  .resume-header {
    padding: 18px 12px;
  }
}
@media screen and (min-width: 992px) {
  .resume-header {
    padding: 32px 45px;
  }

  .resume-server {
    padding: 0 20px !important;
  }
}

@media screen and (max-width: 768px) {
  #app {
    margin-top: 6px !important;
  }

  .resume-info-part-2 {
    font-size: 0.8rem !important;
  }
.resume-other,
  .skill-content,
  .resume-intro,
  .resume-skills,
  .resume-experience {
    padding: 0 10px !important;
  }

  .sign {
    right: 10px !important;
  }

  .resume-job {
    line-height: 65px !important;
  }
}

.skill-content p,
.resume-intro p,
.resume-skills p,
.resume-experience p {
  line-height: 24px;
}

.resume {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.resume-header {
  background-color: var(--resume-header);
  color: #fff;
  transition: 0.5s;
}

/* .resume-section-header,
.resume-header {
  padding: 25px 10px;
} */

@media screen and (max-width: 992px) {
  .resume-name {
    text-align: center;
  }

  .resume-job {
    text-align: center !important;
    font-size: 1.2rem !important;
  }

  .resume-section-header {
    font-size: 1.3rem !important;
  }

  .icon-mayun:before {
    font-size: 0.7rem !important;
  }
}

.resume-header > div {
  width: 100%;
}

.icon-mayun:before {
  font-size: 0.9rem;
}

.resume-name {
  font-size: 2.5rem;
  /* color: var(--font-color); */
  font-weight: 700;
  line-height: 75px;
  transition: 0.5s;
}
.resume-job {
  font-size: 1.4rem;
  /* color: var(--font-color); */
  font-weight: 600;
  line-height: 75px;
  text-align: right;
  transition: 0.5s;
}

.resume-info-part-2 {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.resume-info-part-2 > div:nth-child(2) {
  text-align: right;
}

.icon-wangyiyunyinle:before {
  font-size: 17px;
}

.resume-section-header,
.resume-header {
  font-size: 32px;
}
.resume-section-header span,
.resume-header span {
  padding: 0 9px;
}

.resume-content {
  font-size: 14px;
}

.resume-content ul {
  margin-left: 20px;
}

.resume-content ul li {
  list-style: square outside;
}

.resume-section-header {
  padding: 15px 8px;
}

.resume-other,
.resume-intro,
.resume-skills,
.resume-experience {
  position: relative;
  margin-bottom: 25px;
  padding: 0 20px;
}

.resume-experience > div:nth-child(2) {
  margin-bottom: 6px;
}

.sign {
  position: absolute;
  right: 20px;
  padding: 1px 5px;
  color: #00b38a;
  border: 1px solid #00b38a;
  border-radius: 3px;
  line-height: 16px;
  /* font-size: 13px; */
  transition: 0.5s;
}

.sign:hover {
  color: #fff;
  background-color: #00b38a;
}

.resume-server {
  margin-bottom: 25px;
  font-size: 0.9rem;
  padding: 0 6px;
  transition: 0.5s;
}

.resume-experience p:nth-child(2) {
  display: flex;
  justify-content: space-between;
}

.resume-footer {
  padding: 20px 50px;
  text-align: center;
  color: #d1d1d1;
}
</style>
